<template>
  <div class="Allpadding Toppadding" v-if="shop">
      <my-head title="会员购" :back='false' ></my-head>
      <div class="searchDiv" @click="gotoSearch"><van-icon name="search"  size="30" />  搜一搜</div>
      <div class="shopNav">
          <ul>  
              <li v-for="(item,index) in images" :key="index">
                  <router-link :to="{name:item.name}">
                  <img :src="item.image" alt="">
                  <p>{{item.title}}</p>
                  </router-link>
              </li>
          </ul>
      </div>
      <!-- 商品数据 -->
      <my-shop :shopTop='shopTop' :shopCenter='shopCenter'></my-shop>
      <my-shop :shopTop='shopTop1' :shopCenter='shopCenter1'></my-shop>

  </div>
</template>

<script>
export default {
data() {
    return {
         images: [{
             image:require("@/assets/image/shouban.png"),
             title:"手办",
             name:'shouban'
         },{
             image: require("@/assets/image/zhoubian.png"),
             title:"周边",
              name:'zhoubian'
         },{
             image: require("@/assets/image/manzhan.png"),
             title:"漫展演出",
              name:'move'
         },{
             image:require("@/assets/image/new.png"),
             title:"今日上新",
              name:'new'
         },{
             image:require("@/assets/image/niudan.png"),
             title:"潮玩扭蛋",
              name:'niudan'
         },{
             image:require("@/assets/image/game.png"),
             title:"游戏相关",
            name:'game'
         },{
             image: require("@/assets/image/tushu.png"),
             title:"图书漫画",
              name:'tushu'
         },{
             image:require("@/assets/image/all.png"),
             title:"全部分类",
              name:'sort'
         }     
      ],
      shop:[],
      shop1:null,
      //shopTop为上面的4条数据,
      shopTop:null,
      shop2:null,
      shopCenter:null,
      shopTop1:null,
      shopCenter1:null

    }
},
methods: {
    async getShop(){
        let res=await this.$ajax.getBili({
                network: "",
                mobi_app: 'iphone',
                openEvent: 'cold',
                build: 0,
                pageNum: 1,
                pageSize: 10,
                mVersion: 7,
                platform: 'h5',
                feedType: 0,
        })
        console.log(res.data.vo.list);
        this.shop=res.data.vo.list
        this.shop1=this.shop.filter(v=>{
           return v.type=='mallitems'
        })
        console.log(this.shop1);
        this.shopTop=this.shop1.slice(0,4)
        console.log(this.shopTop)
        this.shop2=this.shop.filter(v=>{
            return v.type=="ticketproject"
        })
        this.shopCenter=this.shop2.slice(0,2)
        console.log(this.shopCenter);
        this.shopTop1=this.shop1.slice(4,8)
        this.shopCenter1=this.shop2.slice(2,4)
    },
    //点击跳转搜索框
    gotoSearch(){
        this.$router.push({
            name:'search'
        })
    }

},
mounted() {
    this.getShop()
},
}
</script>

<style>
.shopNav{
    background: white;
    padding: 0px 0px 16px 0px;
margin-top: 10px;
    border-radius: 10px;
}
.shopNav ul{
    display: flex;
    width: 100%;
    list-style: none;
    flex-wrap: wrap;
}
.shopNav li{
    width: 25%;
     margin-top: 16px;
}
.shopNav li p{
    margin-top: 4px;
    font-size: 12px;
    text-align: center;
    color: #212121;
}
.shopNav li img{
    width: 40px;
    height: 40px;
    display: block;
    position: relative;
    margin: 0 auto; 
}
.searchDiv{
    text-align: center;
    background: #fff;
    color: rgb(153, 153, 153);
    height: 30px;
    line-height: 30px;
    border-radius: 30px;
    margin-top :10px;
}
</style>